import React from 'react';
import login from '../../assets/css/login/login.module.css';
import {Link} from "react-router-dom";
import {Toast} from 'antd-mobile';
import 'antd-mobile/lib/toast/style/css'

export default class LoginComponent extends React.Component{
    constructor(){
        super();
        this.state={
            show:true,
            userName:'',
            userPass:''
        }
    }
    goBack(){
        this.props.history.push('/')
    }
    imgClick(){
        this.setState({show:!this.state.show});
        if (this.state.show===true){
            this.refs.img.type = 'text';
        } else {
            this.refs.img.type = 'password';
        }
    }
    boxBtn(){
        if (this.state.userName!=='' && this.state.userPass!==''){
            const params=new URLSearchParams();
            params.append('cellphone',this.state.userName);
            params.append('password',this.state.userPass);
            fetch('http://vueshop.glbuys.com/api/home/user/pwdlogin?token=1ec949a15fb709370f',{
                method:'POST',
                body:params
            }).then((res)=>res.json())
                .then(res=>{
                    console.log(res);
                    if (res.code===200){
                        localStorage['isLogin']=true;
                        localStorage['nickname']=res.data.nickname;
                        localStorage['uid']=res.data.uid;
                        this.props.history.push('/')
                    }else {
                        Toast.info(res.data, 1);
                    }
                })
        }else {
            Toast.info('内容不能为空', 1);
        }
    }

    render() {
        return(
            <div className={login.boxLogin}>
                <div>
                    <img src={require("../../assets/images/home/goods/back.png")} onClick={this.goBack.bind(this)} alt=""/>
                    <span>会员登录</span>
                </div>
                <div className={login.boxDiv}>
                    <p><input type='text' placeholder='手机号' onChange={(e)=>{
                        this.setState({userName:e.target.value})
                    }}/></p>
                    <p>
                        <input type='password' placeholder='密码' ref='img' onChange={(e)=>{
                            this.setState({userPass:e.target.value})
                        }}/>
                        <img src={require('../../assets/images/user/my/f1.png')} alt='' className={this.state.show?login.show:login.hide}
                             onClick={this.imgClick.bind(this)}/>
                        <img src={require('../../assets/images/user/my/f2.png')} alt='' className={!this.state.show?login.show:login.hide}
                             onClick={this.imgClick.bind(this)}/>
                    </p>
                </div>
                <div className={login.boxBtn}>
                    <button onClick={this.boxBtn.bind(this)}>登录</button>
                    <p>
                        <span>
                            <img src={require('../../assets/images/home/index/forget.png')} alt=''/>
                            忘记密码
                        </span>
                        <Link to="/login/reg">
                            <img src={require('../../assets/images/home/index/reg.png')} alt=''/>
                            快速注册
                        </Link>
                    </p>
                </div>
            </div>
        )
    }
}